* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
img {
  border: 0;
  vertical-align: middle;
}
a {
  text-decoration: none;
}
body {
  background: url(../images/bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.viewport {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 780px;
  background: url(../images/logo.png) no-repeat 0 0;
  padding: 0.91666667rem 0.20833333rem 0;
}
.viewport .column {
  flex: 3;
}
.viewport .column .panel {
  position: relative;
  border: 15px solid transparent;
  border-width: 0.53125rem 0.39583333rem 0.36458333rem 1.32291667rem;
  border-image-source: url(../images/border.png);
  border-image-slice: 51  38  35  127;
  margin-bottom: 0.20833333rem;
}
.viewport .column .panel .inner {
  position: absolute;
  top: -0.53125rem;
  left: -1.32291667rem;
  right: -0.39583333rem;
  bottom: -0.36458333rem;
  padding: 0.25rem 0.375rem;
}
.viewport .column .overview {
  height: 1.14583333rem;
}
.viewport .column .overview ul {
  display: flex;
  justify-content: space-between;
}
.viewport .column .overview ul li h3 {
  color: #fff;
  font-size: 0.27083333rem;
  margin: 0 0 0.08333333rem 0.05rem;
}
.viewport .column .overview ul li span {
  font-size: 0.125rem;
  color: #4c9bfd;
}
.viewport .column .monitor {
  height: 5rem;
}
.viewport .column .monitor .inner {
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
}
.viewport .column .monitor .inner .tabs {
  padding: 0 0.375rem;
  margin-bottom: 0.1875rem;
  display: flex;
}
.viewport .column .monitor .inner .tabs a {
  color: #1950c4;
  font-size: 0.14583333rem;
  padding: 0 0.28125rem;
}
.viewport .column .monitor .inner .tabs a:first-child {
  padding-left: 0;
  border-right: 0.01041667rem solid #fff;
}
.viewport .column .monitor .inner .tabs a.active {
  color: #fff;
}
.viewport .column .monitor .inner .content {
  flex: 1;
  position: relative;
}
.viewport .column .monitor .inner .content .head {
  display: flex;
  justify-content: space-between;
  padding: 0.125rem 0.375rem;
  line-height: 0.14583333rem;
  font-size: 0.14583333rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}
.viewport .column .monitor .inner .content .marquee-view {
  position: absolute;
  bottom: 0;
  top: 0.41666667rem;
  left: 0;
  right: 0;
  overflow: hidden;
}
.viewport .column .monitor .inner .content .marquee-view .marquee {
  animation: move 15s linear infinite;
}
.viewport .column .monitor .inner .content .marquee-view .marquee .row {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 0.125rem 0.375rem;
  line-height: 0.14583333rem;
}
.viewport .column .monitor .inner .content .marquee-view .marquee .row .icon-dot {
  position: absolute;
  left: 0.16666667rem;
  opacity: 0;
}
.viewport .column .monitor .inner .content .marquee-view .marquee .row:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.viewport .column .monitor .inner .content .marquee-view .marquee .row:hover .icon-dot {
  opacity: 1;
}
.viewport .column:nth-child(2) {
  flex: 4;
  margin: 0.33333333rem 0.20833333rem 0;
}
@keyframes move {
  100% {
    transform: translateY(-50%);
  }
}
